<template>
    <div class="billists">
        <tab>
            <tab-item v-for="(item,index) in tabs" :key="index" @on-item-click="tabclick"
                      :selected="tabs[sindex] === item">
                {{item.name}}
            </tab-item>
        </tab>
        <section class="container">
            <scroller
                    :on-refresh="refresh"
                    :on-infinite="infinite"
            >
                <div class="tabcon" v-for="(itemb,kindex) in tabs" v-show="kindex===sindex" :key="kindex">
                    <ul class="listcon" v-if="itemb.items.length>0">
                        <li @click="jump(item.planId)" v-for="(item,index) in itemb.items">
                            <Matchmiddle :matches="item.matches"/>
                            <Bottominfo :deadline="item.deadline"
                                        :back="item.back"
                                        :winState="item.winState"
                                        :bean="item.bean"
                                        :timeState="item.timeState"
                            />
                        </li>
                    </ul>
                    <Nodata v-else type="1"/>
                </div>
            </scroller>
        </section>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {Tab, TabItem, Swiper, SwiperItem} from 'vux';
    import {getBillistsFinshedR, getBillistsSalingR, getBillistsUnFinshedR} from '../../service/my';
    import {getMytoken} from '../../service/common';
    import {delay} from '../../uitls/common';
    import {concat} from 'ramda';
    import Matchmiddle from '../../components/Matchmiddle';
    import Bottominfo from '../../components/Bottominfo';
    import Nodata from '../../components/Nodata.vue';
    export default {
        components: {
            Tab, TabItem, Matchmiddle, Bottominfo, Nodata
        },
        data() {
            return {
                tabs: [{
                    name: '销售中',
                    items: [],
                    page: 1,
                    fn: getBillistsSalingR
                }, {
                    name: '进行中',
                    items: [],
                    page: 1,
                    fn: getBillistsUnFinshedR
                }, {
                    name: '已结束',
                    items: [],
                    page: 1,
                    fn: getBillistsFinshedR
                }],
                sindex: 0,
            };
        },
        created() {
            this.getDate(1);
        },
        computed: {},
        methods: {
            async tabclick(index){
                this.sindex = index;
                const {tabs, sindex}=this;
                if(tabs[sindex].items.length === 0) {
                    await this.getDate(1);
                }
            },
            async infinite(done){
                await delay(1000);
                const {sindex, tabs}=this;
                tabs[sindex].page = tabs[sindex].page + 1;
                const over = await this.getDate(tabs[sindex].page, true);
                if(over) {
                    tabs[sindex].page = tabs[sindex].page - 1;
                    done(true);
                    return;
                }
                done();
            },
            async refresh(done){
                await delay(1000);
                await this.getDate(1);
                done();
            },
            async getDate(page, loadermore){
                const {token}=await getMytoken();
                const {tabs, sindex}=this;
                if(!token) {
                    this.$vux.toast.text('未登录');
                    return;
                }
                const {data}= await tabs[sindex].fn(token, page, loadermore);
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.plans.length === 0) {
                            return true;
                        }
                        else {
                            tabs[sindex].items = concat(tabs[sindex].items, data.data.plans);
                        }
                    }
                    else {
                        tabs[sindex].page = 1;
                        tabs[sindex].items = data.data.plans;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }


            },
            jump(id){
                this.$router.push(`/matchs/recommendmatchdetails/${id}`)
            }

        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .billists {
        height: 100%;
        display: flex;
        flex-direction: column;
        .container {
            display: flex;
            flex: 1;
            flex-direction: column;
            position: relative;
        }
    }

    .listcon {
        li {
            padding: 20px 24px 20px 34px;
            background: #fff;
            margin-bottom: 10px;
            h6 {
                font-size: @fz28;
            }
        }
    }
</style>